Appearance

框架特点 ​

  1. 优势：相比Electron安装包小，性能较好，并且底层安全性高。
  2. 劣势：文档和社区很少，碰到问题难以解决。
  3. 适合小而美的桌面应用。

启动 ​

当前文档针对windows桌面端，更多平台看官方文档。

安装依赖 ​

前置要求 | Tauri

  1. 系统依赖项 -. Microsoft C++ 生成工具 -. WebView2
  2. Rust（构建项目)
  3. Node.js

创建项目 ​

yarn create tauri-app

命令 ​

启动项目：yarn tauri dev 打包项目：yarn tauri build 打包文件目录：/src-tauri/target/release

前后端通信 ​

前端代码 ( src/main.ts)

通过invoke 调用greet函数

js
import { invoke } from "@tauri-apps/api/core";
let greetInputEl: HTMLInputElement | null;
let greetMsgEl: HTMLElement | null;

async function greet() {
  if (greetMsgEl && greetInputEl) {
    // Learn more about Tauri commands at https://tauri.app/develop/calling-rust/
    greetMsgEl.textContent = await invoke("greet", {
      name: greetInputEl.value,
    });
  }
}

window.addEventListener("DOMContentLoaded", () => {
  greetInputEl = document.querySelector("#greet-input");
  greetMsgEl = document.querySelector("#greet-msg");
  document.querySelector("#greet-form")?.addEventListener("submit", (e) => {
    e.preventDefault();
    greet();
  });
});

后端代码 ( src-tauri/src/lib.rs )

通过greet函数，返回拼接字符串

rust
// Learn more about Tauri commands at https://tauri.app/develop/calling-rust/
#[tauri::command]
fn greet(name: &str) -> String {
    format!("Hello, {}! You've been greeted from Rust!", name)
}

#[cfg_attr(mobile, tauri::mobile_entry_point)]
pub fn run() {
    tauri::Builder::default()
        .plugin(tauri_plugin_opener::init())
        .invoke_handler(tauri::generate_handler![greet])  // 启动时注册
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

后端代码 ( src-tauri/src/lib.rs )

回应

rust
use tauri::{AppHandle, Emitter};
// Learn more about Tauri commands at https://tauri.app/develop/calling-rust/
#[tauri::command]
fn greet_back(app: AppHandle, name: &str) {
	app.emit("test_event", "greet, user").unwrap();
}

#[cfg_attr(mobile, tauri::mobile_entry_point)]
pub fn run() {
    tauri::Builder::default()
        .plugin(tauri_plugin_opener::init())
        .invoke_handler(tauri::generate_handler![greet_back])  // 启动时注册
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

文件系统 ​

引入 ​

npm run tauri add fs
yarn run tauri add fs

使用 ​

js
import { exists, writeFile, BaseDirectory } from '@tauri-apps/plugin-fs';
// 检查 `$APPDATA/avatar.png` 文件是否存在
await exists('avatar.png', { baseDir: BaseDirectory.AppData });

  

const click = async () => {
  const encoder = new TextEncoder();
  const data = encoder.encode("Hello, world!");
  await writeFile("test.txt", data, { baseDir: BaseDirectory.Desktop });
};